<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${ctx}">
<title>事务类型管理页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}commons/css/common.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var tempName = "";
	var atJSON = "";
	$(document).ready(function() {
		//将后台传入的affairJSON转换成js中的JSON对象，即接收后台传入的JSON对象，以便在js中使用
		atJSON = $.parseJSON('${atJSON}');
		//设置editDIV的宽度和位置
		$("#editDIV").width("696px");
		$("#editDIV").css("margin-left",(document.body.scrollWidth-720)/2);
		//鼠标经过时结果行背景变色
		$(".tb-table>table tr:gt(0)").hover(function() {
			$(this).css("background", "#EEEEEE");
		}, function() {
			$(this).css("background", "");
		});
	});
	function showDIV(count,status){
		if(null != count){
			$("#divTitle").html("修改事务类型");
			$("#code").val($("#typeCode_"+count).val());
			$("#code").css("background-color", "bisque");
			$("#code").attr("readOnly", true);
			tempName = $("#typeName_"+count).html();
			$("#name").val(tempName);
			$("#state").get(0).selectedIndex = status;
			$("#flowTypeCode").val($("#flowTypeCode_"+count).val());
			changeFlow($("#flowCode_"+count).val());
			$("#requestPath").val($("#requestPath_"+count).val());
		}else
			$("#divTitle").html("新增事务类型");
		$("#bg").css("display", "block");
		$("#editDIV").css("display", "block");
	}
	function checkCode(){
		//当tempName没有值时，说明是新增，否则不需要检验编号
		if(!tempName){
			//新增，并且当编号栏不为空时，需要检验Code
			if($.trim($("#code").val())){
				if(atJSON && atJSON[$.trim($("#code").val()).toUpperCase()]){
					$("#codeSpan").html("*该编号已存在");
					return false;
				}
			}else{
				$("#codeSpan").html("*请填写编号");
				return false;
			}
		}
		$("#codeSpan").html("");
		return true;
	}
	function checkName(){
		name = $.trim($("#name").val());
		//当名称栏不这空时
		if(name){
			//且不等于tempName时，查找atJSON中是否存在
			if($("#name").val() != tempName){
				if(atJSON && JSON.stringify(atJSON).indexOf("\""+name+"\"") >= 0){
					$("#nameSpan").html("*该名称已存在");
					return false;
				}
			}
			$("#nameSpan").html("");
			return true;
		}else{
			$("#nameSpan").html("*请填写名称");
			return false;
		}
	}
	function checkFlow(){
		if("" != $("#flowCode").val()){
			return true;
		} else {
			$("#result").html("未配置流程");
			return false;
		}
	}
	function checkPath(){
		if("" != $.trim($("#requestPath").val())){
			return true;
		} else {
			$("#result").html("未配置请求路径");
			return false;
		}
	}
	function submitType(){
		if(!$("#code").attr("readOnly") && !checkCode()){
			return false;
		}
		if(!checkName() || !checkFlow() || !checkPath()){
			$("#result").css("color", "red");
			return false;
		}
		$("#result").html("");
		$.post("affairTypeManage.htm",
			{
				action : "SAVE",
				typeCode : $.trim($("#code").val()),
				typeName : $.trim($("#name").val()),
				status : $("#state").val(),
				flowTypeCode: $("#flowTypeCode").val(),
				flowCode : $("#flowCode").val(),
				requestPath : $("#requestPath").val()
			}, function(data) {
				if (data == 'Y') {
					$("#result").html("操作成功！");
					$("#result").css("color", "green");
					$("#subType").css("display", "none");
				} else {
					$("#result").html("操作失败！<br>可能该操作会影响到其他已生效的功能，故不能被执行。");
					$("#result").css("color", "red");
					$("#subType").css("display", "none");
				}
		});
	}
	function changeFlow(checkedFlow){
		if("" != $("#flowTypeCode").val()){
			$.post("flowManage.htm",
					{
						action : "QUERY_LIST_BY_TYPE",
						typeCode : $("#flowTypeCode").val()
					},
					function(data) {
						$("#flowCode")[0].length = 1;//将flowCode下所有的option删除，只留第一项
						for(var flow in data)
							$("#flowCode").append("<option value='"+flow+"'>"+data[flow]+"</option>");//在flowCode最后面添加一行option
						if(checkedFlow)
							$("#flowCode").val(checkedFlow);
					},"json");
		}else{
			$("#flowCode")[0].length = 1;//将flowCode下所有的option删除，只留第一项
		}
	}
	function deleteAffairType(typeCode,typeName){
		if (Boolean(typeCode) && confirm("您确定要删除【" + typeName + "】这个事务类型吗？")) {
			$.post(
				"affairTypeManage.htm",
				{
					action : "DELETE",
					typeCode : typeCode
				},
				function(data) {
					if (data == 'Y') {
						alert("删除成功！");
					} else {
						alert("操作失败！\n可能该操作会影响到其他已生效的功能，故不能被执行。");
					}
					$("#formId").submit();
				});
		}
	}
	function exitDIV(){
		$("#formId").submit();
	}
	function resetOPT(){
		$("#typeName").val("");
		$("#status").val("");
	}
</script>
<style type="text/css">
	.bg{display: none;position: absolute;z-index: 1001;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;-moz-opacity: 0.7;opacity: .70;filter: alpha(opacity=70);}
	#editDIV{display: none;position: absolute;z-index: 1002;top: 25%;border: 5px solid #E8E9F7;background-color: white;overflow: auto;}
</style>
</head>
<body>
	<div id="frame-body">
		<div id="frame-main">
			<div id="frame-content">
				<h3 class="fn-mt7">查询条件
					<span class="toolbarbtn"><input type="button" onclick="showDIV(null,0)" value="新增类型" /></span>
				</h3>
				<div class="tb-table">
					<form id="formId" action="affairTypeManage.htm" method="POST">
						<input type="hidden" id="currentPage" name="currentPage" value="1" />
						<table>
							<tr>
								<th width="15%">类型名称：</th>
								<td><input type="text" class="i-text" id="typeName" name="typeName" value="${typeName}"/></td>
								<th width="15%">使用状态：</th>
								<td><select id="status" name="status" class="i-select">
										<option value="">全部</option>
										<option value="0" <c:if test="${48 eq status }">selected="selected"</c:if>>未使用</option>
										<option value="1" <c:if test="${49 eq status }">selected="selected"</c:if>>使用中</option>
										<option value="2" <c:if test="${50 eq status }">selected="selected"</c:if>>已保留</option>
									</select></td>
							</tr>
							<tr>
								<td colspan="4" align="center">
									<div class="tb-tfoot-noborder">
										<span class="btn" id="sID"><input type="submit" value="查&emsp;询" /></span>&emsp;
										<span class="btn"><input type="button" onclick="resetOPT()" value="重&emsp;置" /></span>
									</div>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div id="editDIV" class="tb-table" align="center">
					<table>
						<tr>
							<td colspan="4" style="padding: 0;margin: 0;">
								<h3 id="divTitle" class="fn-mt7" style="padding: 0;margin: 0;text-align: center;"></h3>
							</td>
						</tr>
						<tr><td id="result" colspan="4" align="center"></td></tr>
						<tr>
							<th width="10%">类型编号：</th>
							<td width="33%"><input type="text" class="i-text" id="code" name="code" value="" onblur="checkCode()"/>
								<span id="codeSpan" style="color: red"></span></td>
							<th width="10%">类型名称：</th>
							<td width="46%"><input type="text" class="i-text" id="name" name="name" value="" onblur="checkName()"/>
								<span id="nameSpan" style="color: red"></span></td>
						</tr>
						<tr>
							<th>使用状态：</th>
							<td><select id="state" name="state" class="i-select">
									<option value="0">未使用</option>
									<option value="1">使用中</option>
									<option value="2">已保留</option>
								</select>
								<span id="stateSpan" style="color: red"></span></td>
							<th>选择流程：</th>
							<td>
								<select id="flowTypeCode" name="flowTypeCode" class="i-select" onchange="changeFlow()">
									<option value="">请选择</option>
									<c:if test="${ftMap != null }">
										<c:forEach var="ft" items="${ftMap }">
											<option value="${ft.key}">${ft.value}</option>
										</c:forEach>
									</c:if>
								</select>
								<select id="flowCode" name="flowCode" class="i-select">
									<option value="">请选择</option>
								</select></td>
						</tr>
						<tr>
							<th>请求路径：</th>
							<td colspan="3"><input type="text" class="i-text" id="requestPath" name="requestPath" value="" style="width:99%"/></td>
						</tr>
					</table>
					<div class="tb-tfoot-noborder" align="center" style="height: 40px;margin-top: 13px;">
						<span class="btn" id="subType"><input type="button" onclick="submitType()" value="提&emsp;交" /></span>&emsp;
						<span class="btn"><input type="button" onclick="exitDIV()" value="返&emsp;回" /></span>
					</div>
				</div>
				<c:if test="${pageList != null}">
					<h3 class="fn-mt7">
						<span style="float: left; font-size: 14px; font-weight: bold;">事务类型查询结果</span>
						<br style="height: 0; clear: both;" />
					</h3>
					<div class="tb-table">
						<table id="tab">
							<thead>
								<tr>
									<th width="30">序 号</th>
									<th>类型名称</th>
									<th>配置的流程</th>
									<th>使用状态</th>
									<th>创建人</th>
									<th>创建时间</th>
									<th>修改人</th>
									<th>修改时间</th>
									<th width="120">操&emsp;作</th>
								</tr>
							</thead>
							<tbody>
								<c:choose>
									<c:when test="${fn:length(pageList) > 0}">
										<c:forEach var="at" items="${pageList}" varStatus="str">
											<tr>
												<td align="center"><c:out value="${str.count}" />
													<input type="hidden" id="typeCode_${str.count }" value="${at.typeCode }" />
												</td>
												<td align="center" id="typeName_${str.count }"><c:out value="${at.typeName}" /></td>
												<td align="center">
													${ftJSON[at.flowTypeCode] } ›› ${flowJSON[at.flowCode] }
													<input type="hidden" id="flowTypeCode_${str.count }" value="${at.flowTypeCode }" />
													<input type="hidden" id="flowCode_${str.count }" value="${at.flowCode }" />
													<input type="hidden" id="requestPath_${str.count }" value="${at.requestPath }"/>
												</td>
												<td align="center" id="status_${str.count }">
													<c:if test="${48 eq at.status}">未使用</c:if>
													<c:if test="${49 eq at.status}">使用中</c:if>
													<c:if test="${50 eq at.status}">已保留</c:if>
												</td>
												<td align="center"><c:out value="${at.createUser}" /></td>
												<td align="center"><fmt:formatDate value="${at.gmtCreate}" type="both" /></td>
												<td align="center"><c:out value="${at.modifiedUser}" /></td>
												<td align="center"><fmt:formatDate value="${at.gmtCreate}" type="both" /></td>
												<td align="center">
													<a href="javascript:void(0)" onclick="showDIV('${str.count }','${at.status }')">修改</a>&emsp;
													<a href="javascript:void(0)" onclick="deleteAffairType('${at.typeCode}','${at.typeName}')">删除</a>
												</td>
											</tr>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<tr>
											<td class="center" colspan="9">没有找到对应的记录</td>
										</tr>
									</c:otherwise>
								</c:choose>
							</tbody>
						</table>
					</div>
					<c:if test="${fn:length(pageList) > 0}">
						<div>
							<jsp:include page="/views/commons/paginator.jsp">
								<jsp:param name="formName" value="formId" />
								<jsp:param name="currentPage" value="currentPage" />
							</jsp:include>
						</div>
					</c:if>
				</c:if>
			</div>
		</div>
	</div>
	<div id="bg" class="bg"></div>
</body>
</html>